<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九九乘法表</title>
    <style>
        table{
            margin:50px auto;
            border:solid 1px #000; border-collapse: collapse;
        }
        td{
            border:solid 1px #000;
            padding:10px 15px;
        }
    </style>
</head>
<body>
<table></table>
<script>
//    方法1
//    document.write('<table>')
//    // 生成行，生成1-9数字
//    for(var i = 1; i < 10; i++){
//        document.write('<tr>')
//        // 生成单元格，每一行内部乘法表的列，
//        for(var j = 1; j <= i; j++){
//            document.write('<td>' + j + ' * ' + i
//            + ' = ' + j * i + '</td>')
//        }
//        document.write('</tr>')
//    }
//    document.write('</table>')

//    方法二
// 创建标签
//var table = document.querySelector('table')
    var table = document.createElement('table')
    for(var i = 1; i < 10; i++){
        // 给table添加行
        var tr = table.insertRow()
//        tr.innerHTML = i
        for( var j = 1; j <= i; j++ ){
            // 给tr 添加单元格
            var td = tr.insertCell()
            td.innerHTML = j + ' * ' + i + ' = ' + j * i
        }
    }
// appendChild()  追加子元素
    document.body.appendChild(table)

//var table = document.createElement('table')
//for(var i = 9; i >= 1; i--){
//    // 给table添加行
//    var tr = table.insertRow('tr')
////        tr.innerHTML = i
//    for( var j = i; j >= 1; j-- ){
//        // 给tr 添加单元格
//        var td = tr.insertCell('td')
//        td.innerHTML = j + ' * ' + i + ' = ' + j * i
//    }
//}
//// appendChild()  追加子元素
//document.body.appendChild(table)
</script>
</body>
</html>